{% extends '::base.html.twig' %}

{% block title %}
    {{ parent() }} | Time tracker
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    {% stylesheets  filter='cssrewrite'
        '%kernel.root_dir%/../vendor/components/bootstrap-daterangepicker/daterangepicker-bs3.css'
    %}
        <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}

{% block headerContent %}
    <h1>
        Time tracker
        <small>Overview</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="{{ path('jumph_time_tracker_overview') }}"><i class="fa fa-clock-o"></i> Time tracker</a></li>
        <li> Overview</li>
    </ol>
{% endblock %}

{% block content %}
    <div class="row">
        <div class="col-lg-8 col-md-12">
            <div class="box box-primary table-responsive">
                {{ form_start(timeTrackerForm, { 'action': path('jumph_time_tracker_add'), 'attr': { 'id': 'main-form'}}) }}
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>Project</th>
                            <th>Category</th>
                            <th>Description</th>
                            <th>Date</th>
                            <th>Time</th>
                            <th>Options</th>
                        </tr>
                        <tr>
                            <td>
                                {{ form_widget(timeTrackerForm.project) }}
                            </td>
                            <td>
                                {{ form_widget(timeTrackerForm.category) }}
                            </td>
                            <td>
                                {{ form_widget(timeTrackerForm.description) }}
                            </td>
                            <td>
                                {{ form_widget(timeTrackerForm.dateAt) }}
                            </td>
                            <td>
                                {{ form_widget(timeTrackerForm.hours) }}
                            </td>
                            <td>
                                {{ form_widget(timeTrackerForm._token) }}
                                <button type="submit" class="btn btn-primary">Add</button>
                            </td>
                        </tr>
                    </thead>
                    <tbody class="js-show-time-lines">
                        {% for timeTracker in timeTrackers %}
                            {% include('JumphTimeTrackerBundle:TimeTracker:_time_line.html.twig') %}
                        {% endfor %}
                    </tbody>
                </table>
                {{ form_end(timeTrackerForm, {'render_rest': false}) }}
            </div>
            <div class="box-footer clearfix">
                <div class="col-xs-12">
                    {{ knp_pagination_render(timeTrackers) }}
                </div>
            </div>
        </div>

        <div class="col-lg-4 col-md-12">
            <div class="box box-solid bg-light-blue-gradient">
                <div class="box-header">
                    <!-- tools box -->
                    <div class="pull-right box-tools">
                        <button class="btn btn-primary btn-sm daterange pull-right" data-toggle="tooltip" title="" data-original-title="Date range"><i class="fa fa-calendar"></i></button>
                        <button class="btn btn-primary btn-sm pull-right" data-widget="collapse" data-toggle="tooltip" title="" style="margin-right: 5px;" data-original-title="Collapse"><i class="fa fa-minus"></i></button>
                    </div><!-- /. tools -->

                    <i class="fa fa-bar-chart-o"></i>
                    <h3 class="box-title">
                        Categories overview
                    </h3>
                </div>
                <div class="box-body">
                    <div class="pie-chart">

                    </div>
                </div>
            </div>

            <div class="box box-solid bg-light-blue-gradient">
                <div class="box-header">
                    <!-- tools box -->
                    <div class="pull-right box-tools">
                        <button class="btn btn-primary btn-sm daterange pull-right" data-toggle="tooltip" title="" data-original-title="Date range"><i class="fa fa-calendar"></i></button>
                        <button class="btn btn-primary btn-sm pull-right" data-widget="collapse" data-toggle="tooltip" title="" style="margin-right: 5px;" data-original-title="Collapse"><i class="fa fa-minus"></i></button>
                    </div><!-- /. tools -->

                    <i class="fa fa-bar-chart-o"></i>
                    <h3 class="box-title">
                        Day overview
                    </h3>
                </div>
                <div class="box-body">
                    <div class="column-chart">

                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {% javascripts
        '%kernel.root_dir%/../vendor/components/highcharts/highcharts.js'
        '%kernel.root_dir%/../vendor/components/highcharts/modules/exporting.js'
        '%kernel.root_dir%/../vendor/components/moment/min/moment-with-locales.min.js'
        '%kernel.root_dir%/../vendor/components/bootstrap-daterangepicker/daterangepicker.js'
    %}
        <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
    <script type="text/javascript">
        $(document).ready(function() {

            // Submit time
            $('body').on('submit', 'form', function(e) {
                e.preventDefault();

                var form = $(this);

                $.ajax({
                    type: "POST",
                    dataType: "json",
                    url: $(form).attr('action'),
                    data: $(form).serialize()
                })
                .success(function( data ) {
                    if(data.status == 'success') {
                        $('table tbody').prepend(data.html);
                    }
                });
            });

            $('.daterange').daterangepicker(
            {
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
                    'Last 7 Days': [moment().subtract('days', 6), moment()],
                    'Last 30 Days': [moment().subtract('days', 29), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
                },
                startDate: moment().subtract('days', 29),
                endDate: moment()
            },
            function(start, end) {
                alert("You chose: " + start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
            });

            // Make monochrome colors and set them as default for all pies
            Highcharts.getOptions().plotOptions.pie.colors = (function () {
                var colors = [],
                        base = Highcharts.getOptions().colors[0],
                        i

                for (i = 0; i < 10; i++) {
                    // Start out with a darkened base color (negative brighten), and end
                    // up with a much brighter color
                    colors.push(Highcharts.Color(base).brighten((i - 3) / 7).get());
                }
                return colors;
            }());

            // Pie chart
            $('.pie-chart').highcharts({
                chart: {
                    backgroundColor: 'rgba(0,0,0,0)',
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false
                },
                credits: {
                    enabled: false
                },
                title: {
                    text: null
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                            style: {
                                color: '#FFF'
                            }
                        }
                    }
                },
                series: [{
                    type: 'pie',
                    name: 'Categories',
                    data: [
                        ['Development',   45.0],
                        ['Design',       26.8],
                        ['Setup',     6.2],
                        ['Documentation',   0.7]
                    ]
                }]
            });

            // Column Chart

            $('.column-chart').highcharts({
                chart: {
                    backgroundColor: 'rgba(0,0,0,0)',
                    type: 'column'
                },
                credits: {
                    enabled: false
                },
                title: {
                    text: null
                },
                xAxis: {
                    type: 'category',
                    labels: {
                        rotation: -45,
                        style: {
                            color: '#FFF',
                            fontSize: '13px',
                            fontFamily: 'Verdana, sans-serif'
                        }
                    }
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'Hours',
                        style: {
                            color: '#FFF',
                            fontSize: '13px',
                            fontFamily: 'Verdana, sans-serif'
                        }
                    },
                    labels: {
                        style: {
                            color: '#FFF',
                            fontSize: '13px',
                            fontFamily: 'Verdana, sans-serif'
                        }
                    }
                },
                legend: {
                    enabled: false
                },
                tooltip: {
                    pointFormat: '<b>{point.y:.1f} hours</b>'
                },
                series: [{
                    name: 'Day of the week',
                    data: [
                        ['Monday', 23.7],
                        ['Tuesday', 16,1],
                        ['Wednesday', 14.2],
                        ['Thursday', 14.0],
                        ['Friday', 12.5],
                        ['Saturday', 12.1],
                        ['Sunday', 11.8]
                    ],
                    dataLabels: {
                        enabled: true,
                        rotation: -90,
                        color: '#FFFFFF',
                        align: 'right',
                        x: 4,
                        y: 10,
                        style: {
                            fontSize: '13px',
                            fontFamily: 'Verdana, sans-serif',
                            textShadow: '0 0 3px black'
                        }
                    }
                }]
            });
        });
    </script>

{% endblock %}
